<style scoped>
@import url("./login.css");
</style>

<template>
  <div class="all">
    <div class="left_box1"></div>
    <div class="left_text1">双线质量管控体</div>
    <div class="left_text2">力求每件产品、每个细节都尽善尽美</div>
    <div class="left_text3">够专业 才放心</div>
    <div class="left_box2"></div>
    <div class="system_enter">
      <div class="text1">欢迎使用</div>
      <div class="text2">系统登陆</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="user">
          <!-- 用户名 <div class="shuru"><img src="/img//Canvas_slices//-e-用户名.png" alt=""> <input
                                type="text" v-model="user"></div> -->

          <el-form-item label="用户名" prop="userName">
            <el-input style="width: 235px" v-model="ruleForm.userName">
              <img src="../img/Canvas_slices/-e-用户名.png" alt="" />
            </el-input>
          </el-form-item>
        </div>
        <div class="password">
          <!-- <div class="shuru2">
          <img src="/img//Canvas_slices//-e-密码.png" alt="" /><input
            type="password"
            v-model="password"
          />
        </div> -->
          <el-form-item label="密   码" prop="passWord">
            <el-input
              style="width: 235px"
              autosize
              type="password"
              v-model="ruleForm.passWord"
            >
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <button class="enter" @click="submitForm">登录</button>
    </div>
    <div class="buttom">
      All Rights Reserved ©2021 版权所有 ｜ 粤ICP备18069755号
    </div>
    <div class="logoBig">
      ORDER聚造
      <div class="logoSmall">ORDER聚造</div>
    </div>
  </div>
</template> 

<script>
// import axios from "axios";
import md5 from "js-md5"
export default {
  name: "login",
  components: {},
  data() {
    return {
      ruleForm: {
        userName: '',
        passWord: '',
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        passWord: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // submitForm(formName) {
    //   // console.log(this.$refs);
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    submitForm() {
      // console.log(axios);
      console.log(this.$refs);
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/login",
            method: "POST",
            data: {
              userName: this.ruleForm.userName,
              passWord: md5(this.ruleForm.passWord),
              platform: "web",
            },
          }).then((res) => {
            if (!res.errorMsg) {
              localStorage.setItem("token", res.token);
              localStorage.setItem("user", JSON.stringify(res));
              this.$router.push("/Main");
             }
          });
        }
      });
    },
  },
};
</script>

